{% extends "index.html" %}

{% block css-javascript-agregados %}
{% endblock %}

{%block heading_content %}Seleccione un usuario{% endblock %}
{% block content %}	
	<span id="filtrar" class="icono-buscar" ></span>
	<center><div id="filtro" class="busqueda-head ui-corner-all ui-state-default">
		<h1>Filtro:</h1>
		<div id="form">
		</div>
	</div></center>
    <div style="clear:both;"><br /><br /><br /></div>
	<div id="info_pa_filtrar">
	    {% for object in user_list %}
	    <div  id="{{object.euser.id}}" style="float:left;">
	      <img class="img_border" align="left" src="{{object.euser.get_profile.foto.url}}" width="128px" height="128px" />
	      <span style="clear: both; display: block;">
	      	{% if object.euser.id == request.user.id %}
	        	<center><a href="/comunidadcyt/accounts/profileSummary/">{{object.euser.first_name}} {{object.euser.last_name}}</a></center>   
	      	{% else %}
	        	<center><a href="/comunidadcyt/accounts/profileSummary/{{object.euser.id}}">{{object.euser.first_name}} {{object.euser.last_name}}</a></center>   
	        {% endif %}       
	      </span> 
	    </div>    
	    {% endfor %}
	</div>
<script>
    $("#filtro").hide();
    
    $("#filtrar").click(function(){
      $("#filtro").toggle();
    });

	(//un script jquery
		function ($) {
			jQuery.expr[':'].Contains = function(a,i,m){
				return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
			};
			//falta hacer que sea incensible a mayusculas y minusculas
			function filterList(header, list) {
				var form = $("<form>").attr({"class":"filterform","action":"#"}),input = $("<input/>").attr({"class":"filterinput ui-corner-all","type":"text"});
				$(form).append(input).appendTo(header);
				$(input).change( function () {
					var filter = $(this).val(); //obtiene el valor que puse en el input
						if(filter) {
							$matches = $("div:Contains("+filter+")"); //aca selecciono que coincide
							$('div', list).not($matches).slideUp(); //oculto las discrepancias
							$matches.slideDown(); //muestro las concidencias
						} else {
							$(list).find("div").slideDown(); //muestro todo
						}
					return false;
				}).keyup( function () {
					$(this).change();
				});
				}
			$(function () {
					filterList($("#form"), $("#info_pa_filtrar"));	
				});
		}(jQuery)
	);
</script>
{% endblock %}